@charset 'UTF-8';
@import './common.scss';
@import '../fonts/iconfont.css';

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

.web{
	header{
		position: absolute;
		width: 100vw;
		top: 0;
		left: 0;
		background-color: #FFFFFF;
		.boxT{
			width: 93vw;
			height: 8vw;
			margin: 4vw auto;
			display: flex;
			justify-content: space-between;
			.leftBox{
				button{
					width: 23vw;
					font-size: 4.5vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 6vw;
					letter-spacing: 0vw;
					color: #000000;
					border-radius: 10vw;
					border: 1px solid #FF9344;
					padding: 1.5vw 3.3vw;
					background-color: #FFFFFF;
				}
			}
			.centerBox{
				span{
					font-size: 4vw;
					font-weight: normal;
					font-stretch: normal;
					line-height: 11vw;
					letter-spacing: 0vw;
					color: #000000;
					
				}
			}
			.cityBox{
				position: relative;
				i{
					position: absolute;
					color: #FF9344;
					font-size: 4vw;
					right: 1.5vw;
					top: 2.8vw;
					
				}
				select{
					margin-top: 1.5vw;
					width: 21vw;
					height: 7vw;
					border: 1px solid #FF9344;
					padding-left: 2vw;
					appearance:none; /*去掉下拉箭头*/
					outline: none;
					option{
						font-size: 3vw;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0vw;
						color: #000000;
					}
				}
				select::-ms-expand { display: none; }
			}
		}
		.boxB{
			.searchBox{
				width: 100vw;
				form{
					position: relative;
					width: 24.8vw;
					height: 5vw;
				    margin: 0 auto;
					border: 1px solid #FF9344;
					border-radius: 10vw;
					padding: 2vw 9vw 2vw 4vw;
					input{
						// 居中对齐
						display: flex;
						align-items: center;
						
						width: 22.5vw;
						font-size: 3vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 5vw;
						letter-spacing: 0vw;
						color: #777777;
						border: none;
					}
					i{
						position: absolute;
						color: #FF9344;
						font-size: 6vw;
						right: 3vw;
						top: 0.5vw;
					}
				}
			}
			.searchBoth{
				.title{
					width: 17vw;
					margin: 0 auto;
					margin-top: 2vw;
					margin-bottom: 1.2vw;
					h2{
						font-size: 3vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 6vw;
						letter-spacing: 0vw;
						color: #000000;
					}
				}
				.searchItem{
					width: 69vw;
					margin: 0 auto;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					.item{
						width: 17vw;
						height: 9vw;
						background-color: #dcdcdc;
						text-align: center;
						padding-top: 2.5vw;
						margin-bottom: 0.5vw;
						span{
							font-size: 3vw;
							font-weight: normal;
							font-stretch: normal;
							line-height: 6vw;
							letter-spacing: 0vw;
							color: #898989;
						}
					}
				}
			}
		}
	}
	
	main{
		overflow: auto;
		position: absolute;
		width: 100vw;
		top: 62vw;
		bottom: 18vw;
		.heatS{
			margin-bottom: 3vw;
			.title{
				width: 92vw;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom:3vw;
				.left{
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 23vw;
					i{
						color: #FF9344;
					}
					h2{
						font-size: 4vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 6vw;
						letter-spacing: 0vw;
						color: #000000;
					}
				}
				.right{
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 11vw;
					h2{
						font-size: 3vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 7vw;
						letter-spacing: 0vw;
						color: #000000;
					}
					i{
						font-size: 3vw;
						color: #FF9344;
					}
				}
			}
			.content{
				width: 94vw;
				margin: 0 auto;
				display: flex;
				position: relative;
				justify-content: space-between;
				a{
					display: block;
				}
				.img1{
					width: 37vw;
					height: 47vw;
					img{
						width: 100%;
					}
				}
				.img2{
					width: 56vw;
					height: 20vw;
					img{
						width: 100%;
					}
				}
				.imgBoxb{
					position: absolute;
					display: flex;
					justify-content: space-between;
					width: 55vw;
					top: 20vw;
					left: 39vw;
					.img3{
						width: 26vw;
						height: 26vw;
						img{
							width: 100%;
						}
					}
					.img4{
						width: 28vw;
						height: 26vw;
						img{
							width: 100%;
						}
					}
				}
				
			}
		}
		.recS{
			margin-bottom: 3vw;
			.title{
				width: 92vw;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom:3vw;
				.left{
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 23vw;
					i{
						color: #FF9344;
					}
					h2{
						font-size: 4vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 6vw;
						letter-spacing: 0vw;
						color: #000000;
					}
				}
				.right{
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 11vw;
					h2{
						font-size: 3vw;
						font-weight: normal;
						font-stretch: normal;
						line-height: 7vw;
						letter-spacing: 0vw;
						color: #000000;
					}
					i{
						font-size: 3vw;
						color: #FF9344;
					}
				}
			}
			.content{
				.imgBox{
					width: 93vw;
					margin: 0 auto;
					display: flex;
					justify-content: space-between;
					.box1{
						width: 30vw;
						height: 27vw;
						img{
							width: 100%;
						}
					}
					.box2{
						width: 28vw;
						height: 27vw;
						img{
							width: 100%;
						}
					}
					.box3{
						width: 29vw;
						height: 27vw;
						img{
							width: 100%;
						}
					}
				}
			}
		}
	}
}

@media screen and (min-width:768px) and (max-width:1024px) {
	.web{
		header{
			.boxT{
				.cityBox{
					select{
						font-size: 3vw;
					}
				}
			}
		}
		main{
			.heatS{
				.title{
					.left{
						.iconfont{
							font-size: 6vw;
						}
					}
					.right{
						h2{
							font-size: 3.3vw;
						}
						i{
							font-size: 4vw;
						}
					}
				}
			}
			.recS{
				.title{
					.left{
						.iconfont{
							font-size: 6vw;
						}
					}
					.right{
						h2{
							font-size: 3.3vw;
						}
						i{
							font-size: 4vw;
						}
					}
				}
			}
		}
	}
	
}